<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="demo">
<p>fullName = {{ fullName }}</p>
<p>full = {{ full }}</p>
</div>

<script>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar',
    full:''
  },
  watch: {
    firstName: function (val) {
      this.full = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.full = this.firstName + ' ' + val
    }
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

vm.firstName = 'Chen'

</script>
</body>
</html>